<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-input style="width:130px" v-model="searchInfo.keyword" placeholder="关键字"></el-input>
        <el-input style="width:130px" v-model="searchInfo.tittle" placeholder="标题"></el-input>
        <el-select v-model="searchInfo.status" style="width:130px" clearable placeholder="发布状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
      </div>
      <el-button class="right" type="primary" @click="jump('create')">新建头条</el-button>
    </div>
    <el-table ref="table" :height="this.$getTableHeight" :data="tableData" stripe border>
      <el-table-column show-overflow-tooltip prop="tittle" label="标题">
        <template slot-scope="scope">
          <span
            class="blue"
            @click.stop="changeActive(scope.row.id)"
          >{{ scope.row.id ?scope.row.tittle:'&nbsp;' }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="summary" label="摘要" />
      <el-table-column show-overflow-tooltip label="是否发布">
        <template
          slot-scope="scope"
        >{{scope.row.id ? scope.row.status == true ? "是" : "否" : '&nbsp;'}}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="creationTime" label="创建时间" />
      <el-table-column show-overflow-tooltip prop="releaseTime" label="发布时间" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-if="scope.row.id">
            <span class="_delete" @click="deleteHeadline(scope.row)">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
     <div :class="active ? 'closeRightBox trans':'openRightBox trans'" @click.stop>
      <detail
        v-if="active"
        :id="jumpId"
        :page-height="pageHeight"
        :update-right="updateRight"
        @clearJumpId="clearJumpId"
        @editor="openDialog"
      />
    </div>
    <div v-if="dialogVisible" @click.stop>
      <el-dialog
        :title="isCreate ? '新增头条' : '编辑头条'"
        center
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <createAdver :id="jumpId" @closeDialog="handleClose" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Pagination from "~/components/commom/pagination";
import regular from "~/utils/regular";
import createAdver from "~/components/compHeadline/create";
import detail from "~/components/compHeadline/detail";
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  reduceArr,
  createDics,
  changeTableHeight
} from "~/utils/util";
export default {
  data() {
    return {
      updateRight:false,
      dialogVisible: false,
      isCreate: false,
      active:false,
      options: [
        {
          label: "已发布",
          value: true
        },
        {
          label: "未发布",
          value: false
        }
      ],
      searchInfo: {
        keyword: "",
        status: "",
        tittle: ""
      },
      copySearchInfo: {
        keyword: "",
        status: "",
        tittle: ""
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      totalCount: 0,
      tableData: []
    };
  },
  mounted() {
    this.getInitTableDate();
  },
  methods: {
    clearJumpId() {
      this.active = false;
      this.jumpId = null;
    },
    openDialog() {
      this.isCreate = false;
      this.dialogVisible = true;
    },
    changeActive(id) {
      this.active = true;
      this.jumpId = id;
    },
    handleClose() {
      this.dialogVisible = false;
      this.updateRight = !this.updateRight;
      this.searchInfoMation("no");
    },
    jump(id) {
      this.dialogVisible = true;
      this.jumpId = id;
      id === "create" ? (this.isCreate = true) : (this.isCreate = false);
    },
    searchInfoMation(res) {
      this.copySearchInfo = JSON.parse(JSON.stringify(this.searchInfo));
      const result = _searchInfo(res, this.page, this.copySearchInfo);
      this.changeTableData(result);
    },
    getInitTableDate() {
      let data = Object.assign({}, this.copySearchInfo, { page: this.page });
      this.$post({
        url: "/infomanage/informations/getInformations",
        data
      }).then(res => {
        this.totalCount = res.items.totalCount;
        this.tableData = res.items.items;
        changeTableHeight(this);
      });
    },
    changeTableData(res) {
      const that = this;
      _changeTable("/infomanage/informations/getInformations", res, that);
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copySearchInfo);
      this.changeTableData(result);
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfo);
      this.changeTableData(result);
    },
    deleteHeadline(row) {
      const that = this;
      _deleteMethods(
        "/infomanage/informations/deletedInformation",
        row,
        that
      ).then(() => {
        that.searchInfoMation("no");
      });
    }
  },
  components: {
    Pagination,
    createAdver,
    detail
  }
};
</script>